<template>
    <div class="GoodsDetailBar" :class="{active: isTop}">
        <div class="back iconWrap" :class="{active: isTop}" @click="$navBack('/index')">
            <van-icon name="arrow-left" size="20"></van-icon>
        </div>
        <div class="content iconWrap">
            <div v-show="!isTop" class="contentList">
                <div>商品</div>
                <div>评论</div>
                <div>详情</div>
                <div>发圈素材</div>
            </div>
        </div>
        <div class="shoppingCart iconWrap" :class="{active: isTop}">
            <van-icon name="shopping-cart-o" size="18" />
        </div>
        <div class="more iconWrap"
             :class="{active: isTop}" @click="handleMore">
            <van-icon name="ellipsis" size="20" />
        </div>
        <tool-tip v-show="isMore" @pk-click="moreOperate"></tool-tip>
    </div>
</template>

<script>
    import ToolTip from "./ToolTip";
    export default {
        name: 'GoodsDetailBar',
        components: {ToolTip},

        data() {
            return {
                isTop: true,
                isMore: false
            }
        },

        created() {

        },
        mounted() {
            let that = this;
            window.addEventListener('scroll', this.$_.throttle(that.navBarChange, 200), false);
        },
        computed: {
        },
        watch: {},
        methods: {
            moreOperate() {
                //console.log(item)
                this.isMore = false;
                this.$router.push({path: "/index"})
            },
            handleMore() {
                this.isMore = !this.isMore
            },
            //滚动高度判断，顶部导航栏切换
            navBarChange() {
                this.isTop = this.$util.getScrollTop() < window.innerWidth
            }
        }
    }
</script>

<style lang="scss" scoped>
    .GoodsDetailBar {
        position: relative;
        box-sizing: border-box;
        width: 100vw;
        height: 48px;
        padding: 0 7.5px;
        display: flex;
        align-items: center;
        color: #ffffff;
        background: #D82D11;
        .content {
            flex: 1;
            .contentList {
                width: 100%;
                display: flex;
                justify-content: space-around;
            }
        }
        .iconWrap {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 7.5px;
        }
        .iconWrap.active {
            min-width: 28px;
            height: 28px;
            background: rgba(0,0,0,0.3);
            border-radius: 30px;
        }
        .more {
            .dropDown {
                position: absolute;
                top: 30px;
                left: 0;
                width: 50px;
                height: 100px;
                background: #ccc;
            }
        }
    }
    .GoodsDetailBar.active {
        background: none;
    }
</style>
